<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../../dashboard/mixins/resize'
// import {transform} from 'echarts-stat';
// echarts.registerTransform(transform.histogram);

const data = [];
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object
    }
  },
  data() {
    return {
      chart: null,
      colors:["#22c119","#ffba0c","#10a0ff","#de94de","#d83006"],
      Options: {
          dataset: []
      }
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      // this.width = "200px !important"
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
    },
    setOptions(chartData) {
      this.chart.setOption(
        {
          title: {
              text: chartData.title,
              left: 'center'
          },
          grid: {
              top: '20%',    // 上边距
              bottom: '20%'  // 下边距
          },
          legend: {
            show:false,
            left: 10
          },
          tooltip: {
            show:true,
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }

          },
          xAxis: {
            show: true,                //是否显示 x 轴
            gridIndex: 0,              //x 轴所在的 grid 的索引，默认位于第一个 grid
            position: "bottom",       //x 轴的位置。"top"，"bottom"，默认 grid 中的第一个 x 轴在 grid 的下方（'bottom'），第二个 x 轴视第一个 x 轴的位置放在另一侧
            offset: 0,                 //X 轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用
            type: "log",         //坐标轴类型。'value' 数值轴，适用于连续数据。'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
            // 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。'log' 对数轴。适用于对数数据
            name: "",               //坐标轴名称
            nameLocation: "middle",       //坐标轴名称显示位置。可选：'start','middle','end'

            nameGap: 15,                  //坐标轴名称与轴线之间的距离
            nameRotate: 0,                //坐标轴名字旋转，角度值
            inverse: false,              //是否是反向坐标轴
            boundaryGap: true,           //类目轴中 boundaryGap 可以配置为 true 和 false。非类目轴，包括时间，数值，对数轴，boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效['20%', '20%']
            min: chartData.xmin,                    //坐标轴刻度最小值。可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。不设置时会自动计算最小值保证坐标轴刻度的均匀分布。在类目轴中，也可以设置为类目的序数
            max: chartData.xmax,                   //坐标轴刻度最大值。可以设置成特殊值 'dataMax'，此时取数据在该轴上的最大值作为最大刻度。不设置时会自动计算最大值保证坐标轴刻度的均匀分布。在类目轴中，也可以设置为类目的序数
            scale: false,                //只在数值轴中（type: 'value'）有效。是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。在设置 min 和 max 之后该配置项无效。
            splitNumber: 5,             //坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整
            minInterval: 0,             //自动计算的坐标轴最小间隔大小,例如可以设置成1保证坐标轴分割刻度显示成整数。只在数值轴中（type: 'value'）有效。
            logBase: 10,                 //对数轴的底数，只在对数轴中（type: 'log'）有效
            silent: false,              //坐标轴是否是静态无法交互
            triggerEvent: false,       //坐标轴的标签是否响应和触发鼠标事件
            axisLine: {                 //坐标 轴线
               show: true,             //是否显示坐标轴轴线
               onZero: true           //X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效

            },
            axisTick: {                 //坐标轴刻度相关设置
               show: true,              //是否显示坐标轴刻度。
               alignWithLabel: false,  //类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐
               interval: 0,          //坐标轴刻度的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推
               inside: true,           //坐标轴刻度是否朝内，默认朝外。
               length: 5                //坐标轴刻度的长度。
            },
            axisLabel: {
               formatter: function (value) {
                  return value.toExponential(2).toUpperCase(); // 使用toExponential转换为科学计数法，保留2位小数
               }
            }
          },
          yAxis: [
              {
                show: true,                //是否显示 x 轴
                gridIndex: 0,              //x 轴所在的 grid 的索引，默认位于第一个 grid
                position: "bottom",       //x 轴的位置。"top"，"bottom"，默认 grid 中的第一个 x 轴在 grid 的下方（'bottom'），第二个 x 轴视第一个 x 轴的位置放在另一侧
                offset: 0,                 //X 轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用
                type: "log",         //坐标轴类型。'value' 数值轴，适用于连续数据。'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
                // 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。'log' 对数轴。适用于对数数据
                name: "",               //坐标轴名称
                nameLocation: "end",       //坐标轴名称显示位置。可选：'start','middle','end'

                nameGap: 15,                  //坐标轴名称与轴线之间的距离
                nameRotate: 0,                //坐标轴名字旋转，角度值
                inverse: false,              //是否是反向坐标轴
                boundaryGap: true,           //类目轴中 boundaryGap 可以配置为 true 和 false。非类目轴，包括时间，数值，对数轴，boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效['20%', '20%']
                min: chartData.ymin,                    //坐标轴刻度最小值。可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。不设置时会自动计算最小值保证坐标轴刻度的均匀分布。在类目轴中，也可以设置为类目的序数
                max: chartData.ymax,                   //坐标轴刻度最大值。可以设置成特殊值 'dataMax'，此时取数据在该轴上的最大值作为最大刻度。不设置时会自动计算最大值保证坐标轴刻度的均匀分布。在类目轴中，也可以设置为类目的序数
                scale: false,                //只在数值轴中（type: 'value'）有效。是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。在设置 min 和 max 之后该配置项无效。
                splitNumber: 5,             //坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整
                minInterval: 0,             //自动计算的坐标轴最小间隔大小,例如可以设置成1保证坐标轴分割刻度显示成整数。只在数值轴中（type: 'value'）有效。
                logBase: 10,                 //对数轴的底数，只在对数轴中（type: 'log'）有效
                silent: false,              //坐标轴是否是静态无法交互
                triggerEvent: false,       //坐标轴的标签是否响应和触发鼠标事件
                axisLine: {                 //坐标 轴线
                   show: true,             //是否显示坐标轴轴线
                   onZero: true           //X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效

                },
                axisTick: {                 //坐标轴刻度相关设置
                   show: true,              //是否显示坐标轴刻度。
                   alignWithLabel: false,  //类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐
                   interval: 0,          //坐标轴刻度的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推
                   inside: true,           //坐标轴刻度是否朝内，默认朝外。
                   length: 5                //坐标轴刻度的长度。
                },
                axisLabel: {
                   formatter: function (value) {
                      return value.toExponential(2).toUpperCase(); // 使用toExponential转换为科学计数法，保留2位小数
                   }
                }
              },
              {
                  splitLine: {
                      lineStyle: {
                          type: 'dashed'
                      }
                  }
              },
              {
                  splitLine: {
                      lineStyle: {
                          type: 'dashed'
                      }
                  }
              }],
          series: [
              {
                  symbolSize: 2,
                  symbol: 'circle', //将小圆点改成实心 不写symbol默认空心
                  name: '',
                  type: 'line',//scatter散点
                  data: chartData.data // 这里的data传入所有点的坐标就好
              }
          ]
      }
      )
    }
  }
}
</script>
